<template>
  <div class="functionType">
    <div class="titleTop first">
      <h3>{{$t('navigation.employing_unit_list')}}</h3>
      <a-button type="primary" ghost @click="addCompany">{{$t('employing_unit.add_unit')}}</a-button>
    </div>
    <div class="content">
      <CountCard :dataList="dataListCardArr" :status="status" @search="search"/>
      <EmployingUnitTable :status="status" @getCount="getCount"/>
    </div>
  </div>
</template>

<script>
import EmployingUnitTable from '@/components/EmployingUnit/EmployingUnitTable'
import CountCard from '@/components/CountCard/CountCard'
import { count } from '@/api/employingUnit'
export default {
  name: 'functionType',
  components: { EmployingUnitTable, CountCard },
  data () {
    return {
      dataListCardArr: [],
      status: 'ALL'
    }
  },
  created () {
    if (this.$route.query.status) {
      this.status = this.$route.query.status
    }
    this.getCount()
  },
  watch: {
    $route: {
      handler (val, oldVal) {
        if (val.query.status !== oldVal.query.status) {
          this.status = val.query.status || 'ALL'
        }
      }
    }
  },
  methods: {
    addCompany () {
      this.$router.push(`/employingUnit/edit`)
    },
    async getCount () {
      let res = await count()
      if (res.code === 200) {
        this.dataListCardArr = [
          { name: 'employing_unit.all_unit', value: res.data.ALL, key: 'ALL' },
          { name: 'employing_unit.enable_unit', value: res.data.ENABLE, key: 'ENABLE' },
          { name: 'employing_unit.disable_unit', value: res.data.DISABLE, key: 'DISABLE' }
        ]
      } else {
        this.$message.error(res.message)
      }
    },
    search (item) {
      this.$router.push({ query: { status: item.key } })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../styles/var.styl'
.functionType
  :global(.ant-table-title)
      padding 0
  .titleTop
    background #fff
    display flex
    align-items center
    justify-content flex-start
    padding  0 24px 12px
    h3
      margin-right 24px
      font-size 18px
      font-weight bold
    button
      margin-left 12px
  .content
    padding 12px 24px
  :global(.CandidateTable)
    margin-top 12px
</style>
